<!--
 * @Author: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Date: 2024-04-25 11:48:33
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-05-22 09:53:49
 * @FilePath: \vue-element-admin-master-2\src\views\table\dynamic-table\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="selectTop">
      <div class="allType">
        <el-select  v-model="bannerTypeValue" placeholder="全部分类">
          <el-option v-for="item in bannerList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </div>
      <div class="deviceType">
        <el-select  v-model="deviceTypeValue" placeholder="全部设备类型">
          <el-option v-for="item in device_typeList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </div>
      <div class="urlType">
        <el-select  v-model="urlTypeValue" placeholder="全部跳转类型">
          <el-option v-for="item in url_typeList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </div>
      <div class="kemuList">
        <el-select  v-model="kemuValue" placeholder="全部科目">
          <el-option v-for="item in kemulists" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </div>
      <div class="leibie">
        <el-select  v-model="status" placeholder="全部类别">
          <el-option v-for="item in leibieList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </div>
      <div class="serch" @click="search">搜索</div>
    </div>
    
    <el-table :data="tableData" border fit highlight-current-row style="width: 100%" >
      <el-table-column prop="title" label="标题"  />
      <el-table-column label="广告图" style="min-width:110px">
        <template slot-scope="scope">
          <img :src="scope.row.file_url" style="width:100px" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="http_url" label="链接" />
      <el-table-column prop="systypes_title" label="系统分类"  />
      <el-table-column prop="device_type_title" label="设备类型"  />
      <el-table-column prop="name" label="科目">
        <template slot-scope="scope">
          <span v-for="item in scope.row.kemu_lists" :key="item.id" style="margin-right:10px">{{item.title}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="url_type_title" label="跳转类型"  />
      <el-table-column prop="create_time" label="时间" />
      <el-table-column prop="name" label="操作"  >
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import {  getguanggao } from "../../api/user";
import {  kemulists , list_systypes } from "../../api/http";

export default {
  name: 'DynamicTable',
  data() {
    return {
      bannerTypeValue: '',//广告图分类值，全部分类
      deviceTypeValue: '',//设备类型分类值，全部设备类型
      urlTypeValue: '',//广告图分类值，全部分类
      kemuValue:'',//科目值
      status:'',//是否有效
      tableData: [
        {
          name: 'fruit-1',
          apple: 'apple-10',
          banana: 'banana-10',
          orange: 'orange-10'
        },
        {
          name: 'fruit-2',
          apple: 'apple-20',
          banana: 'banana-20',
          orange: 'orange-20'
        }
      ],
      formThead: ['apple', 'banana'],
      kemulists:[],//科目列表
      bannerList:[],//系统信息广告图分类
      url_typeList:[],//系统信息跳转类型分类
      device_typeList:[],//系统信息设备类型分类
      leibieList:[{id:1,title:'有效'},{id:0,title:'无效'}]
    }
  },
  created(){
    
    // this.getkemulists();
    // this.getSysbanner();
    // this.getSysurl_type();
    // this.getSysdevice_type();
    // this.getList_banner();
  },
  methods:{
    //获取科目列表
    getkemulists(){
      kemulists().then(res=>{
        console.log(res,"科目列表")
        const data = res.retRes;
        this.kemulists = data
      })
      
    },
    //获取系统信息内容
    getSysbanner(){
      list_systypes({
        type_str:'banner'
      }).then(res=>{
        this.bannerList = res.retRes
      })
    },
    getSysurl_type(){
      list_systypes({
        type_str:'url_type'
      }).then(res=>{
        this.url_typeList = res.retRes
      })
    },
    getSysdevice_type(){
      list_systypes({
        type_str:'device_type'
      }).then(res=>{
        this.device_typeList = res.retRes
      })
    },
    //获取广告业务线列表
    getList_banner(){
      getguanggao({
        systypes_id:this.bannerTypeValue,
        device_type_id:this.deviceTypeValue,
        kemu_ids:this.kemuValue,
        url_type:this.urlTypeValue,
        status:this.status
      }).then(res=>{
        console.log(res,"广告列表")
        const data = res.retRes;
        this.tableData = []
        this.tableData.push(...data)
        console.log(this.tableData)
      })
      
    },
    //点击搜索
    search(){
      this.getList_banner()
    },
  },
}
</script>
<style lang="scss" scoped>
  .selectTop{
    display: flex;
    margin-bottom: 30px;
    div{
      margin-right: 20px;
      margin-bottom: 20px;
    }
    .serch{
      width: 80px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: #08a579;
      color: #FFF;
      font-size: 14px;
      cursor: pointer;
    }
    .serch:active{
      opacity: .8;
    }
  }
</style>
